<template>
  <div class="container-record">
<!--    <CodeHeader :title="$route.meta.name"></CodeHeader>-->
    <code-tabs v-model="tabActive" :tabs="tabs"></code-tabs>
    <div class="main">
      <code-date-picker
        v-model="selectDate"
        type="year-month"
      ></code-date-picker>
      <div v-if="recordList.length === 0" class="record-no-data">
        <img src="../../assets/img/no_data.png" width="55" />
        <p>暂无数据</p>
      </div>
      <div v-else>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <code-record1
              v-for="(record, key) in recordList"
              :key="key"
              :name="record.sceneName"
              :desc="record.method"
              :date="record.occurTime"
            ></code-record1>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import nus from "@nsrd/nus";
import CodeTabs from "@/components/code/Tabs";
import CodeDatePicker from "@/components/code/DatePicker";
import CodeRecord1 from "@/components/code/Record1";
import CodeHeader from "@/components/code/Header";

const tabs = [
  {
    name: "用卡记录",
    key: "01"
  },
  {
    name: "刷脸记录",
    key: "02"
  },
  {
    name: "收支记录",
    key: "03"
  }
];

export default {
  name: "CodeMineRecord",
  components: {
    CodeTabs,
    CodeDatePicker,
    CodeRecord1,
    CodeHeader
  },
  data() {
    return {
      tabActive: "01",
      tabs,
      selectDate: nus.date.format(new Date(), "YYYYMM"),
      totalPages: "",
      recordList: [],
      searchInfo: {
        yearMonth: "",
        pageNo: 0,
        pageSize: 10
      },
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  watch: {
    tabActive(newL) {
      this.tabActive = newL;
      this.obtainRecord();
    },
    selectDate(newT) {
      this.selectDate = newT;
      this.obtainRecord();
    }
  },
  created() {
    this.initData();
  },
  mounted() {
    document.title = "我的记录";
  },
  methods: {
    initData() {
      this.obtainRecord();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.searchInfo.pageNo = 0;
      this.msgList = [];
      this.obtainRecord();
    },
    onLoad() {
      if (this.searchInfo.pageNo <= this.totalPages - 1) {
        this.searchInfo.pageNo += 1;
        this.obtainRecord();
      } else {
        this.finished = true;
      }
    },
    async obtainRecord() {
      this.searchInfo.yearMonth = this.selectDate;
      let url = "";
      switch (this.tabActive) {
        case "01":
          url = "code";
          break;
        case "02":
          url = "face";
          break;
        case "03":
          url = "pay";
      }
      let res = await this.api.obtainRecord(this.searchInfo, url);
      if (res.ok) {
        this.recordList = res.data;
        this.totalPages = res.totalPages;
      } else {
        this.$dialog.alert({
          message: res.message
        });
      }
      this.loading = false;
      this.finished = false;
      this.refreshing = false;
    }
  }
};
</script>

<style lang="less">
.container-record {
  background: #ffffff;

  .tabs {
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
  }

  .main {
    padding: 20px 15px;

    .record-no-data {
      margin-top: 45px;
      text-align: center;
      p {
        font-size: 15px;
        letter-spacing: 1px;
        padding-top: 5px;
      }
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
